<script setup>
import { ref, defineEmits } from 'vue';
import draggable from 'vuedraggable'
import { useVModel } from '@vueuse/core';
const props = defineProps({
    drag: {
        type: Boolean,
        default: false,
    },
    children: {
        type: Array,
        default: () => [],
    },
    itemKey: {
        type: String
    },
    group: {
        type: Object,
        default: {},
    },
    sort: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['update:children', 'update:drag']);

const isDrag = useVModel(props, 'drag', emit);
const list = useVModel(props, 'moduleValue', emit);
const endFn = (data) => {
    isDrag.value = false
    console.log("endFn", data)
}
const changeFn = (data) => {
    console.log("change", data)
}
const guid = function () {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
const cloneFn = (originData) => {
    let data=JSON.parse(JSON.stringify(originData))
    data.id = guid();
    console.log("originData", data)
    return data;
}
const moveFn = (data) => {
    console.log("data fk",data)
    return true;
}
</script>

<template>
    <draggable v-model="list" :sort="props.sort" class="dragArea list-group" :class="{ isDrag }" :group="props.group"
        @change="changeFn" :clone="cloneFn" :move="moveFn" :component-data="{
            tag: 'ul',
            type: 'transition-group',
            name: !isDrag ? 'flip-list' : null,
        }" :item-key="itemKey" @start="isDrag = true" @end="endFn">
        <template #item="item">
            <div :class="{ 'item-drag': item.element.draggable }" :data-el="item.element.draggable">
                <slot name="item" v-bind="item"> </slot>
            </div>
        </template>

    </draggable>
</template>

<style scoped></style>
